<template>
  <div class="home">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>上传照片</span>
        <el-alert
                title="上传图片支持PNG JPG JPEG BMP四种格式!"
                type="info"
                show-icon
        ></el-alert>
      </div>
      <div>
        <el-upload
                action="http://localhost:8082/photo/upload"
                list-type="picture-card"
                :on-preview="onPreview"
                :on-remove="onRemove"
                :before-upload="beforeUpload"
                :on-success="onSuccess"
                :on-progress="onProgress"
                :data="Data"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                Data: {uId: ""},
                loading: false,
                dialogImageUrl: "",
                dialogVisible: false,
                imageUrl: "",
                uId: "",

                label: [
                    {
                        name: "无法识别",
                        firstCategory: "其他",
                        confidence: 0,
                        secondCategory: "其他",
                    },
                ],
            };
        },

        created() {
            window.sessionStorage.setItem("uId", 56);
            this.Data.uId = window.sessionStorage.getItem("uId");
        },
        methods: {
            onRemove(file, fileList) {
                console.log("onRemove", file, fileList);
                console.log("当前图片url", file.response.data);
                let data = {
                    key: file.response.data,
                };
                this.$axios.get("photo/delete", { params: data }).then((response) => {
                    console.log(response.data);
                    if (response.data.code === 0) {
                        this.$message.success("删除成功!");
                    } else this.$message.error("删除失败!");
                });
            },
            onPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
                console.log("onPreview", file);
            },
            beforeUpload(file) {
                console.log("beforeUpload", file);
                let index = file.name.lastIndexOf(".");
                let extension = file.name.substr(index + 1);
                let extensionList = [
                    "png",
                    "PNG",
                    "jpg",
                    "JPG",
                    "jpeg",
                    "JPEG",
                    "bmp",
                    "BMP",
                ];
                const isLt2M = file.size / 1024 / 1024 < 1;

                if (extensionList.indexOf(extension) < 0) {
                    this.$message.error("上传图片不符合格式要求格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 1MB!");
                }
                return !(extensionList.indexOf(extension) < 0) && isLt2M;
            },
            onProgress() {
                this.loading = true;
            },
            onSuccess(response, file, fileList) {
                this.loading = false;
                console.log("onSuccess", response, file, fileList);
                if (response.code === 0) {
                    this.imageUrl = response.data;
                    this.$message.success("图片上传云成功! 地址:\n" + this.imageUrl);
                    let data = {
                        imageUrl: this.imageUrl,
                        uId: this.Data.uId
                    };
                    this.$axios.get("photo/identify", { params: data }).then((response) => {
                        console.log("识别信息", response);
                        if (response.data.code === 0) {
                            this.$message.success("识别成功!");
                            if (response.data.data.labels.length === 0) {
                                response.data.data.labels = this.label;
                            }
                            for (var i = 0; i < response.data.data.labels.length; i++) {
                                let data = [
                                    "名称:" + response.data.data.labels[i].name,
                                    "种类:" + response.data.data.labels[i].firstCategory,
                                    "相似度:" + response.data.data.labels[i].confidence + "%",
                                    "具体:" + response.data.data.labels[i].secondCategory,
                                ];
                                let newDatas = [];
                                const h = this.$createElement;
                                for (let i in data) {
                                    newDatas.push(h("p", null, data[i]));
                                }
                                this.$notify({
                                    title: "识别信息",
                                    duration: 10000,
                                    message: h("div", null, newDatas),
                                });
                            }
                        } else this.$message.error("识别失败!");
                    });
                } else this.$message.warning("后端出现错误,图片上传云失败!");
            },
        },
    };
</script>
<style lang="less">
  .home {
    .el-card {
      background-color: #ceced2cb;
      .el-card__header {
        font-size: 20px;
        font-weight: 600;
        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: #234d65;
      }
    }
  }
</style>